<template>
	<view>
		<view class="u-page">
			<view class="logo-area">
				<image class="logo" :src="logoIcon" mode="aspectFit"></image>
			</view>
			<web-view :src="operator_url" @message="handleGetMessage" v-if="ifShow"></web-view>
			<!-- <view class="form">
				<view class="input-item">
					<view class="left">
						<image class="icon r" src="/static/imgs/login/icon-r.png"></image>
					</view>
					<view class="right">
						<input class="inputlen" placeholder-class="cl" v-model="formUserName.username" placeholder="请输入用户名">
					</view>
				</view>
				<view class="input-item">
					<view class="left">
						<image class="icon s" src="/static/imgs/login/icon-s.png"></image>
					</view>
					<view class="right">
						<input class="inputlen" placeholder-class="cl" :password="showPassword" v-model="formUserName.password" placeholder="请输入密码">
						<view class="eye-btn" @click="eyePasswordClick()">
							<u-icon name="eye-fill" :color="showPassword ? '#d4d9e3' : '#4a4a4a'" size="22"></u-icon>
						</view>
					</view>
				</view>
			</view> -->
			<u-toast ref="uToast"></u-toast>
			<view class="loginBtn" v-if="globalConfig">
				<button class="button wxsq" open-type="getPhoneNumber" @getphonenumber="wxLogin"></button>
				<button class="button yjdl" @click="yjLogin()"></button>

				<view class="otherNumber">
					<u--input type="number" inputAlign="center" shape="circle" placeholder="其他手机号" border="surround" v-model="mobileNo"></u--input>
				</view>
			</view>
			<view class="text1">
				认证服务由中国移动提供
			</view>
			<view class="xyarea">
				登录即代表同意<text class="link" @click="showBhzc">《中国移动江苏公司个人信息保护政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	import WXBizDataCrypt from '@/utils/WXBizDataCrypt.js'
	import sceneMixins from '@/utils/sceneMixins.js'
	import YDRZ from '@/utils/jssdkYidong.js';
	export default {
		data() {
			return {
				logoIcon: '/static/imgs/login/logo.png',
				showPassword: true,
				formUserName: {
					username: '',
					password: ''
				},
				formPhone: {
					phone: '',
					validateCode: ''
				},
				mobileNo: '',

				operator_url: '',
				ifShow: false,
			}
		},
		mixins: [sceneMixins],
		computed: {
			...mapState(['globalConfig'])
		},
		onLoad() {
			var vm = this;
			uni.showLoading();
			vm.doWxLogin().then(res => {
				uni.hideLoading();
				vm.openId = res.openId;
			});
		},
		options: { styleIsolation: 'shared' },
		methods: {
			...mapMutations(['doLogin', 'changeTab']),
			loginTypeClick: function (v) {
				$u.toast('手机登录功能暂未开放');
				// this.loginType = v.index;
				this.loginType = 0;
				return;
			},
			eyePasswordClick() {
				this.showPassword = !this.showPassword;
			},
			login: function () {
				var vm = this;
				/*
				uni.getUserProfile({
					desc: '获取微信用户基本信息',
					success: function(wxRes) {
					},
					fail: function () {
						$u.toast('获取微信授权信息失败');
					}
				});
				*/
				uni.showLoading();
				vm.getAndLoad('登录', '/mobile/wx/newApi/login.jsp?'  + vm.$Util.stringify({
					openId: vm.openId,
					userName: vm.formUserName.username,
					password: vm.formUserName.password,
				}), (res) => {
					uni.hideLoading();
					if (res.success && res.data) {
						vm.doLogin({
							...res.data
						});
						vm.$jg.jumpAfterLogin();
					} else {
						vm.$refs.uToast.show({
							type: 'error',
							message: "账号或密码不正确"
						});
					}

				});
			},
			yjLogin: function () {
				var vm = this;
				if (vm.mobileNo && (vm.mobileNo.length == 11 || vm.mobileNo.length == 4)) {
					uni.showLoading();
					vm.getAndLoad('登录', '/mobile/teacher/api/v1/user/register.jsp?tel=' + vm.mobileNo, (res) => {	// 教师
						uni.hideLoading();
						if (res.code == 0) {
							vm.doWxLogin(true).then(res => {
								vm.changeTab(0);
								uni.switchTab({ url: '/pages/index/index'});
							});
						} else {
							uni.showToast({title: res.msg || '登录失败', icon: 'none'});
						}

					});
				} else {
					uni.showToast({title: '请输入正确的手机号', icon: 'none'});
				}
			},
			handleGetMessage: function (e) {
				global.resultDesc = e.detail.data[0];
				this.ifShow = fasle;
			},
			__yjLogin: function () {
				var vm = this;
				vm.getAndLoad('获取一键登录token', '/mobile/teacher/api/v1/onekeylogin/getToken.jsp?authPageType=3', function (data) {
					YDRZ.getTokenInfo({
                        data: {
							...data.data.data,
							isTest: '1'
						},
                        success: function (res) {
                            this.operator_url = res.authUrl;
							this.ifShow = false;
                        },
                        error: function (res) {}
                    })
				});
				// vm.gotoH5Page('/mobile/teacher/pages/mobilelogin.html?token=【token】');
			},



			wxLogin: function (e, again = false) {
				var vm = this;
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					vm.doWxLogin(true).then(res => {
						var phone = '';
						try {
							var pc = new WXBizDataCrypt(vm.globalConfig.appId, res.sessionKey);
							phone = pc.decryptData(e.detail.encryptedData, e.detail.iv);
							console.log(phone);
						} catch (err) {
							console.log(err);
							if (again) {
								uni.showToast({title: '授权失败，请重试', icon: 'none'});
							} else {
								vm.wxLogin(e, true);
							}
							return;
						}
						
						uni.showLoading();
						vm.getAndLoad('登录', '/mobile/teacher/api/v1/user/register.jsp?tel=' + phone.phoneNumber, (res) => {
							uni.hideLoading();
							if (res.code == 0) {
								vm.doWxLogin(true).then(res => {
									vm.changeTab(0);
									uni.switchTab({ url: '/pages/index/index'});
								});
							} else {
								uni.showToast({title: res.msg || '登录失败', icon: 'none'});
							}

						});

					});
				} else {
                    uni.$u.toast('获取授权信息失败:  ' + e.detail.errMsg);
				}
			},
			showBhzc: function () {
				uni.navigateTo({ url: '/pages/openh5/index?url=' + encodeURIComponent(this.WX_ASSETS + '/pages/content/信息保护政策.html') });
			}
		}
	}
</script>

<style lang="scss" scoped>
.u-page {
	background: #fff;
	@extend .height100;
}
.logo-area {
	background: url("#{$WXIMAGES}/loginbg.png");
	background-size: 100%;
	width: 750rpx;
	height: 592rpx;
	@extend .flex-center;
	.logo {
		width: 309rpx;
		margin-top: -60rpx;
	}
}
.login-type {
	margin: -120rpx 60rpx 60rpx;
}
.form {
	margin: 80rpx;
	.input-item {
		display: flex;
		border: 2rpx solid #e5e9ee;
		border-radius: 8rpx;
		height: 80rpx;
		margin-bottom: 40rpx;
		.left {
			background: #f1f5fa;
			width: 80rpx;
			border-radius: 8rpx 0 0 8rpx;
			border-right: 1px solid #e5e9ee;
			@extend .flex-center;
			image.r {
				width: 33rpx;
				height: 31rpx;
			}
			image.s {
				width: 29rpx;
				height: 37rpx;
			}
		}
		.right {
			flex-grow: 1;
			border-radius: 0 8rpx 8rpx 0;
			position: relative;
			.inputlen {
				width: 100%;
				height: 100%;
				background: transparent;
				font-size: 28rpx;
			  padding: 0 80rpx 0 40rpx;
    		box-sizing: border-box;
			}
			.cl {
				color: #d4d9e3;
			}
			.eye-btn {
				position: absolute;
				top: 22rpx;
				right: 20rpx;
			}
		}
	}
}
.loginBtn {
    display: flex;
    flex-direction: column;
    align-items: center;
	margin-top: 80rpx;
	.button {
		width: 670rpx;
		height: 96rpx;
		margin-bottom: 40rpx;
	}
	.wxsq {
		background: url("#{$WXIMAGES}/login2.png");
		background-size: 100% 100%;
	}
	.yjdl {
		background: url("#{$WXIMAGES}/login1.png");
		background-size: 100% 100%;
	}
}
.text1 {
	font-size: 28rpx;
	line-height: 40rpx;
	text-align: center;
	color: #999999;
}
.xyarea {
	font-size: 24rpx;
    text-align: center;
    position: absolute;
    width: 100vw;
    bottom: 20rpx;
	color: #999999;
	.link {
		color: #FF8800;
	}
}
.otherNumber {
	position: absolute;
    bottom: 90rpx;
    width: 60%;
}
</style>
